
// document.getElementsByClassName("sty1")[0].onclick=function(){
//     alert(1);
// }

document.getElementsByClassName("sty1")[0].addEventListener("click",function(){
    alert(3);
})

// document.getElementsByClassName("sty2")[0].ontouchstart=function(){
//     alert(4);
// }

document.getElementsByClassName("sty2")[0].addEventListener("touchstart",function(){
    console.log("手指触屏sty2了")
})
document.getElementsByClassName("sty2")[0].addEventListener("touchend",function(){
    console.log("手指离开触屏了")
})

var myClientX;
var myClientY;
/*
document.getElementsByClassName("sty3")[0].addEventListener("touchstart",function(event){
    console.log(event)
    console.log("起点clientX：" + event.changedTouches[0].clientX);
    //myClientX = event.changedTouches[0].clientX;
    myClientX = event.targetTouches[0].clientX;
    console.log("起点clientY：" + event.changedTouches[0].clientY);
    //myClientY = event.changedTouches[0].clientY;
    myClientY = event.targetTouches[0].clientY;
})
document.getElementsByClassName("sty3")[0].addEventListener("touchend",function(event){
    console.log(event)
    console.log("终点clientX：" + event.changedTouches[0].clientX);
    var cx = event.changedTouches[0].clientX;
    //var cx = event.targetTouches[0].clientX;
    console.log("终点clientY：" + event.changedTouches[0].clientY);
    var cy = event.changedTouches[0].clientY;
    //var cy = event.targetTouches[0].clientY;

    //判断移动方向
    if(cx - myClientX > 10){
        console.log("右滑了")
    }
    if(cx - myClientX < -10){
        console.log("左滑了")
    }
    if(cy - myClientY > 10){
        console.log("下滑了")
    }
    if(cy - myClientY < -10){
        console.log("上滑了")
    }
})
*/

document.getElementsByClassName("sty3")[0].addEventListener("touchstart",function(event){
    myClientX = event.targetTouches[0].clientX;
    console.log("起点clientX：" + myClientX);
    myClientY = event.targetTouches[0].clientY;
    console.log("起点clientY：" + myClientY);
})
document.getElementsByClassName("sty3")[0].addEventListener("touchmove",function(event){
    var cx = event.changedTouches[0].clientX;
    var cy = event.changedTouches[0].clientY;
    if(cx - myClientX > 10){
        console.log("右滑了" + (cx - myClientX))
        myClientX = cx;
    }
    if(cx - myClientX < -10){
        console.log("左滑了" + (myClientX-cx))
        myClientX = cx;
    }
    if(cy - myClientY > 10){
        console.log("下滑了" + (cy - myClientY))
        myClientX = cy;
    }
    if(cy - myClientY < -10){
        console.log("上滑了" + (myClientY - cy))
        myClientX = cy;
    }
})

var startPosX;
var startPosY;
document.getElementById("box").addEventListener("touchstart",function(event){
    //元素起始位置
    startPosX = document.defaultView.getComputedStyle(this,null).left
    startPosY = document.defaultView.getComputedStyle(this,null).top
    //起点位置
    myClientX = event.targetTouches[0].clientX;
    myClientY = event.targetTouches[0].clientY;
    // console.log('盒子',startPosX,startPosY)
    // console.log('手指',myClientX,myClientY)
})

document.getElementById("box").addEventListener("touchmove",function(event){
    //终点位置
    var cx = event.changedTouches[0].clientX;
    var cy = event.changedTouches[0].clientY;
    //动态设置位置
    this.style.left = parseFloat(startPosX)/50 + (cx-myClientX)/50 + "rem";
    console.log(this.style.left)
    this.style.top = parseFloat(startPosY)/50 + (cy-myClientY)/50 + "rem"; 
    console.log(this.style.top)
    
})

document.getElementById("box2").addEventListener("tap",function(){
    console.log("点击了")
})

document.getElementById("box2").addEventListener("swiperight",function(){
    console.log("右滑了")
})